<template>
	<view class="page">
		<view class="info-box">
			<view class="info-header flex_column_center_center">
				<image class="img" :src="detail.pic" mode="widthFix"></image>
				<text class="title">{{detail.prodName||''}}</text>
			</view>

			<view class="flex_end_center">
				<u-button text="复制发货地址" type="info" shape="circle" plain
					:customStyle="{width:'250rpx',height:'60rpx',margin:'0rpx'}" @tap="handleCopy"></u-button>
			</view>
			<view class="info-line">
				<text class="info-line-title">客户姓名</text>
				<text>{{detail.takePeople||''}}</text>
			</view>
			<view class="info-line">
				<text class="info-line-title">客户地址</text>
				<text>{{detail.address}}</text>
			</view>
			<view class="info-line">
				<text class="info-line-title">联系电话</text>
				<text>{{detail.mobile||''}}</text>
			</view>
			<view class="info-line">
				<text class="info-line-title">购买数量</text>
				<text>{{detail.num||''}}{{detail.units||''}}</text>
			</view>
			<view class="info-line">
				<text class="info-line-title">预约时间</text>
				<text>{{detail.deliveryTime||''}}</text>
			</view>
			<view class="info-line">
				<text class="info-line-title">备注</text>
				<text>{{detail.remark||''}}</text>
			</view>
			<view class="info-line" v-if="detail.processTime">
				<text class="info-line-title">处理时间</text>
				<text>{{detail.processTime||''}}</text>
			</view>
			<view class="info-line" v-if="detail.conversionTime">
				<text class="info-line-title">完成时间</text>
				<text>{{detail.conversionTime||''}}</text>
			</view>
		</view>

		<view class="map-box" v-if="detail.coord">
			<map style="width: 100%; height: 652rpx;" :latitude="mapInfo.latitude" :longitude="mapInfo.longitude"
				:markers="mapInfo.markers" @tap="markerClick"></map>
		</view>

		<view class="btn-fixed" v-if="[0,2].includes(detail.status)">
			<u-button :text="buttonText" type="primary" shape="circle" color="#276AEE"
				@tap.stop.prevent="handleActoin"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openId: '',
				detail: {},
				mapInfo: {
					latitude: '',
					longitude: '',
					name: '',
					address: '',
					markers: []
				}
			}
		},
		computed: {
			buttonText() {
				switch (this.detail.status) {
					case 0:
						return '派送'
						break
					case 2:
						return '完成'
						break
					default:
						return ''
						break
				}
			}
		},
		onLoad(option) {
			let { openid } = uni.getStorageSync('openId')
			this.openId = openid

			this.detail.id = option.id
			this.getDBDetail()
		},
		methods: {
			handleCopy() {
				let addressStr =
					`收货人:${this.detail.takePeople||''},收货地址:${this.detail.address||''},联系电话:${this.detail.mobile||''}`
				uni.setClipboardData({
					data: addressStr,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					},
					fail: () => {
						uni.showToast({
							title: '复制出错',
							icon: 'none'
						})
					}
				});
			},
			markerClick(e) {
				console.log(e);
				uni.openLocation({
					latitude: this.mapInfo.latitude,
					longitude: this.mapInfo.longitude,
					name: this.mapInfo.name,
					address: this.mapInfo.address,
				});
			},
			async getDBDetail(item) {
				let params = {
					id: this.detail.id,
				}
				await this.$api.getMsVoucherById(params).then(res => {
					if (res.success) {
						this.detail = res.result

						if (this.detail.coord) {
							let tCoord = JSON.parse(this.detail.coord)
							this.mapInfo.latitude = tCoord.latitude
							this.mapInfo.longitude = tCoord.longitude
							this.mapInfo.name = tCoord.name || ''
							this.mapInfo.address = tCoord.address || ''
							this.mapInfo.markers = [{
								id: 1,
								latitude: tCoord.latitude,
								longitude: tCoord.longitude,
								width: 40,
								height: 50
							}]
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			// 点击
			handleActoin() {
				const that = this
				uni.showModal({
					title: '提示',
					content: `确定${this.buttonText}本订单？`,
					success: async function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							switch (that.detail.status) {
								case 0:
									await that.handleSend()
									break;
								case 2:
									await that.handleSendFinish()
									break;
								default:
									uni.showToast({
										icon: 'none',
										title: '未知情况，请联系管理员！'
									})
									break;
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 派送
			async handleSend() {
				let params = {
					id: this.detail.id,
					openId: this.openId
				}
				await this.$api.addDelivery(params).then(res => {
					if (res.success) {
						uni.showToast({
							icon: 'none',
							title: res.result
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				}).catch(() => {
					uni.showToast({
						icon: 'none',
						title: '系统异常，请联系管理员！'
					})
				})
			},
			// 订单完成
			async handleSendFinish() {
				let params = {
					id: this.detail.id,
					openId: this.openId
				}
				await this.$api.addDeliveryFinish(params).then(res => {
					if (res.success) {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							icon: 'none',
							title: res.result
						})
					}
				}).catch(() => {
					uni.showToast({
						icon: 'none',
						title: '系统异常，请联系管理员！'
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
</style>

<style lang="scss" scoped>
	.page {
		padding-bottom: calc(200rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
	}

	.info-box {
		margin-top: 20rpx;
		padding: 40rpx 50rpx 25rpx;
		background-color: #fff;

		.info-header {
			padding-bottom: 30rpx;

			.img {
				width: 650rpx;
			}

			.title {
				margin-top: 25rpx;
				color: #000000;
				font-weight: 500;
				font-size: 34rpx;
			}
		}

		.info-line {
			padding: 10rpx 0;
			font-size: 30rpx;
			line-height: 40rpx;
			color: #000000;

			display: flex;
			justify-content: space-between;

			.info-line-title {
				flex: 0 0 auto;
				width: 240rpx;
			}
		}
	}

	.map-box {
		margin-top: 20rpx;
		padding: 30rpx 50rpx;
		background-color: #fff;
	}

	.btn-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 50rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		box-shadow: 0rpx -2rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
		box-sizing: border-box;
	}
</style>